<!--
 * @Descripttion: 课堂分析详情-教学环节
 * @version: V1.0.0.1
 * @Author: zhaozhenzhuo
 * @Date: 2025-10-24 13:25:11
 * @LastEditors: zhaozhenzhuo
 * @LastEditTime: 2025-10-24 13:25:11
-->
<template>
	<div class="teaching-segment-wrapper">
		<div v-if="false" class="fragment-btn-wrapper">
			<Plus />
			<p>新建环节</p>
		</div>
		<div class="fragment-content-wrapper">
			<div
				v-for="(item, index) in chapterList"
				:key="index"
				class="content-item"
				@click="onContentItemClickHandle(item.startTime)"
			>
				<div class="top-wrapper">
					<div class="left-info">
						<div class="time">
							<span v-if="item.startTime || item.startTime === 0">{{
								formatSeconds(item.startTime / 1000)
							}}</span>
							<span
								v-if="
									(item.startTime || item.startTime === 0) && (item.endTime || item.endTime === 0)
								"
								>-</span
							>
							<span v-if="item.endTime || item.endTime === 0">{{
								formatSeconds(item.endTime / 1000)
							}}</span>
						</div>
						<div v-if="false" class="edit-icon">
							<img src="@/assets/images/lessonAnalysisDetails/text-edit-normal.png" />
							<Delete />
						</div>
					</div>
					<div class="right-info">
						<div v-for="indexStr in item.indexStrList" :key="indexStr" class="right-info-btn">
							{{ indexStr }}
						</div>
					</div>
				</div>
				<div v-if="item.title" class="title-wrapper">{{ item.title }}</div>
				<div v-if="item.summary" class="detail-wrapper">{{ item.summary }}</div>
			</div>
			<div v-if="!chapterList?.length" class="empty-wrap">暂无内容</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { formatSeconds } from '@/assets/js/utils';
import { getErrorMessage, getSliceByLessonCodeAPI } from '@/api/index';
import type { SliceListItemType } from './TeachingSegment.type';

const props = withDefaults(
	defineProps<{
		lessonCode: string;
	}>(),
	{
		lessonCode: ''
	}
);

const emit = defineEmits<{
	(e: 'changeVideoTime', time: number): void; // 切换视频时间
}>();

onMounted(() => {
	getSliceByLessonCode();
});

// 章节信息
const chapterList = ref<SliceListItemType[]>([]);
// 获取切片信息
const getSliceByLessonCode = async () => {
	try {
		const data = await getSliceByLessonCodeAPI({
			lessonCode: props.lessonCode,
			sliceType: 'outline'
		});

		// 处理indexList
		chapterList.value = data
			.filter((item) => item.indicatorCode !== 'outline-blank-none')
			.map((item) => ({
				...item,
				indexStrList: [item.indicatorName || '']
			}));
	} catch (err) {
		console.error(getErrorMessage(err));
	}
};

// 点击内容项
const onContentItemClickHandle = (time: number) => {
	emit('changeVideoTime', time / 1000);
};
</script>

<style lang="scss" scoped>
.teaching-segment-wrapper {
	padding: 1.6rem;
	height: 100%;
	display: flex;
	flex-direction: column;

	.fragment-content-wrapper {
		margin-top: 0 !important;

		.content-item {
			position: relative;
			margin-left: 1.5rem;
			border-bottom: 1px solid $border-color-primary;

			&:hover {
				border-bottom: 1px solid transparent;
				border-radius: 0.8rem;

				.top-wrapper {
					&::before {
						background-color: $color-brand;
					}

					&::after {
						content: '';
						position: absolute;
						left: calc(-2.7rem + 3px);
						top: 1.2rem;
						width: 3px;
						height: 3px;
						background-color: #ffffff;
						border-radius: 50%;
						transform: translateY(-50%);
					}
				}
			}

			&::before {
				content: '';
				position: absolute;
				left: calc(-1.5rem + 4px);
				top: 0;
				width: 1px;
				height: calc(100% + 0.8rem + 1px);
				background-color: $border-color-primary;
			}

			&:last-child {
				&::before {
					height: 100%;
				}
			}

			&:first-child {
				&::before {
					height: calc(100% + 0.8rem + 1px - 2.4rem);
					top: 2.4rem;
				}
			}
		}

		.content-item:not(:hover) {
			background-color: transparent !important;
			border-radius: 0 !important;
		}

		.top-wrapper {
			position: relative;

			&::before {
				content: '';
				position: absolute;
				left: -2.7rem;
				top: 1.2rem;
				width: 9px;
				height: 9px;
				background-color: $bg-block-color-dark;
				border-radius: 50%;
				transform: translateY(-50%);
			}
		}
	}
}
</style>
